<template>
    <div class="articleItem">
        <div class="detail">
            <!-- {{route.hash}} hash参数http://localhost:3000/detail?id=2#777-->
            <!-- {{route.query}} query参数http://localhost:3000/detail?id=2-->
            <h2>{{article.title}}</h2>
            <p>{{article.content}}</p>
        </div>
        <div class="sider">
            <Card>
                <template #header>
                    文章列表
                </template>
                <article-item />
            </Card>
        </div>
    </div>
</template>

<script setup>
    import api from '@/api/api'
    import {useRoute} from 'vue-router'
    import ArticleItem from '@/components/ArticleItem.vue'
    import Card from '@/components/Card.vue'
    import {watch,ref} from 'vue'
    const route = useRoute();   //获取路由参数
    let article = ref();
    watch(route,async () => {
        article.value = await api.find(route.params.id);
    })
    article.value = await api.find(route.params.id);
</script>

<style lang="scss" scoped>
    .articleItem{
        width: 100%;
        display:flex;
        .detail {
            flex: 0 0 60%;
            max-width: 60%;
            margin-right: 20px;
            padding: 20px;
            background-color: #fff;
            box-sizing: border-box;
            p{
                color:#666;
                line-height: 1.5em;
            }
        }
        .sider{
            flex: 0 0 calc(40% - 20px);
            max-width: calc(40% - 20px);
        }
    }
</style>